<template>
    <div>
        <!-- 登录 -->
        <!--  action="" 跳转地址 -->
        <form class="form" @submit.prevent='onSubmit'>
            <label>用户名：<input type="text" v-model="username"></label>
            <label>密码：<input type="password" v-model="password"></label>
            
            <label>
                <button>提交</button>
            </label>
        </form>
    </div>
</template>
<script>
//axios
//npm i axios 或者yarn add axios
import axios from 'axios';
export default {
    data(){
        return {
            username:'',
            password:'',
        }
    },
    methods:{
        onSubmit(){
            //解构
            const {username,password} = this.$data;
            //前端做基础的校验
            if(username.trim().length<2){
                return alert('用户名不许少于2位！')
            }

            if(password.trim().length<6){
                return alert('密码不许少于6位！')
            }

            //发送给后端接口
            //console.log(username,password);
            axios.get('/data.json'/*,
            {
                username:username,
                password:password,
            }*/).then((res)=>{
                //模拟后端的逻辑判断，对比用户和密码
                if(res.data.username === username && res.data.password === password){
                    alert('登录成功！')
                }else{
                    alert('登录失败！')
                }
            })
            
        }
    }
}
</script>
<style lang="scss">
.form{
    &>label{
        display: block;
    }
}
</style>